---
title: インポート
description: Astroでさまざまな種類のコンテンツをインポートする方法を説明します。
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";
import ReadMore from '~/components/ReadMore.astro'

Astroは、ほとんどの静的アセットを設定不要でサポートしています。プロジェクトのJavaScript（Astro frontmatterスクリプトを含む）のどこでも`import`文を使用でき、Astroは最終ビルドにその静的アセットのビルドされた最適化されたコピーを含めます。また、`@import`はCSSと`<style>`タグの中でもサポートされています。


## 対応するファイル形式

Astroは、標準で以下のファイル形式をサポートしています。

- Astroコンポーネント（`.astro`）
- Markdown（`.md`, `.markdown`など）
- JavaScript（`.js`、`.mjs`）
- TypeScript（`.ts`、`.tsx`）
- NPMパッケージ
- JSON（`.json`）
- JSX（`.jsx`、`.tsx`）
- CSS（`.css`）
- CSS Modules（`.module.css`）
- イメージとアセット（`.svg`、`.jpg`、`.png`など）

さらに、Astroを拡張して、React、Svelte、Vueコンポーネントなど、さまざまな[UIフレームワーク](/ja/guides/framework-components/)のサポートを追加できます。また、[Astro MDXインテグレーション](/ja/guides/integrations-guide/mdx/)をインストールし、プロジェクトで`.mdx`ファイルを使用することもできます。

### `public/`内のファイル

プロジェクトの[`public/`ディレクトリ](/ja/basics/project-structure/#public)には、任意の静的アセットを置けます。Astroはそれをそのまま最終ビルドとして直接コピーします。HTMLテンプレートの中では、`public/`内のファイルをURLパスで直接参照できます。


## Import構文

Astroは、ESMを使います。これは、ブラウザでサポートされているのと同じ`import`および`export`構文です。


### JavaScript

```js
import { getUser } from './user.js';
```

JavaScriptは、通常のESMの`import`と`export`の構文でインポートできます。


### TypeScript

```js
import { getUser } from './user';
import type { UserType } from './user';
```

Astroには、[TypeScript](https://www.typescriptlang.org/)のサポートが組み込まれています。Astroプロジェクトで`.ts`や `.tsx`ファイルを直接インポートしたり、[Astroのコンポーネントスクリプト](/ja/basics/astro-components/#コンポーネントスクリプト)や [巻き上げられたscriptタグ](/ja/guides/client-side-scripts/)の中で直接TypeScriptコードを書けます。

**Astroは、型チェックを自ら行うことはありません**。型チェックは、IDEや別のスクリプトなど、Astroの外部で行う必要があります。Astroファイルの型チェックには、[`astro check`](/ja/reference/cli-reference/#astro-check)コマンドが用意されています。


:::note[TypeScriptとファイル拡張子]
[TypeScriptのモジュール解決ルール](https://www.typescriptlang.org/docs/handbook/module-resolution.html)では、TypeScriptファイルをインポートする際に`.ts`と`.tsx`のファイル拡張子を使用するべきではありません。代わりに、`.js`/`.jsx`というファイル拡張子を使うか、ファイル拡張子を完全に省略する必要があります。

```ts
import { getUser } from './user.js'; // user.ts
import MyComponent from "./MyComponent"; // MyComponent.tsx
```
:::


<ReadMore>[AstroのTypeScriptサポート](/ja/guides/typescript/)の詳細はこちら。</ReadMore>


### JSX / TSX

```js
import { MyComponent } from './MyComponent.jsx';
```

Astroには、プロジェクトにJSX（`*.jsx`と`*.tsx`）ファイルのサポートが組み込まれています。JSXの構文は、自動的にJavaScriptにトランスパイルされます。

AstroはJSX構文を標準で理解できますが、React、Preact、Solidなどのフレームワークを適切にレンダリングするには、フレームワークのインテグレーションをインストールする必要があります。詳しくは、[インテグレーションガイド](/ja/guides/integrations-guide/)をご覧ください。

:::note
**Astroは`.js`/`.ts`ファイル内のJSXをサポートしません。** JSXは、`.jsx`と`.tsx`のファイル拡張子で終わるファイル内でのみ扱われます。
:::


### npmパッケージ

npmパッケージをインストールした場合、Astroでインポートできます。

```astro
---
import { Icon } from 'astro-icon';
---
```

パッケージがレガシーフォーマットを使用して公開されていた場合、Astroは`import`文が機能するように、パッケージをESMに変換します。場合によっては、動作させるために[`vite config`](/ja/reference/configuration-reference/#vite)を調整する必要があるかもしれません。

:::caution
一部のパッケージは、ブラウザ環境に依存しています。Astroコンポーネントはサーバー上で動作するため、パッケージをフロントマターで[インポートするとエラー](/ja/guides/troubleshooting/)になることがあります。
{/* TODO: トラブルシューティングページが更新されたらリンク先を /ja/guides/troubleshooting/#document-or-window-is-not-defined にする */}
:::

### JSON

```js
// デフォルトのエクスポートでJSONオブジェクトを読み込む
import json from './data.json';
```

Astroは、JSONファイルをアプリケーションへ直接インポートできます。インポートされたファイルは、デフォルトのインポートで完全なJSONオブジェクトを返します。


### CSS

```js
// 'style.css'を読み込んで、ページに注入します。
import './style.css';
```

Astroは、CSSファイルをアプリケーションに直接インポートできます。インポートされたスタイルはエクスポートされませんが、インポートすることで自動的にそれらのスタイルがページに追加されます。これはデフォルトですべてのCSSファイルに対して機能し、プラグインによってSassやLessのようなコンパイル可能なCSS言語もサポートします。


### CSSモジュール

```jsx
// 1. './style.module.css'のクラス名をユニークでスコープされた値に変換します。
// 2. 元のクラス名と、最終的にスコープされた値をマッピングしたオブジェクトを返します。
import styles from './style.module.css';

// この例ではJSXを使っていますが、CSSモジュールはどんなフレームワークでも使えます。
return <div className={styles.error}>Your Error Message</div>;
```

Astroは、`[name].module.css`という命名規則でCSSモジュールをサポートしています。他のCSSファイルと同様に、インポートすると自動的にそのCSSがページに適用されます。しかし、CSSモジュールは、オリジナルのクラス名を一意の識別子にマップする特別なデフォルトの `styles` オブジェクトをエクスポートします。

CSSモジュールは、スタイルシートのために一意に生成されたクラス名によって、フロントエンドでコンポーネントのスコープと分離を強制するのに役立ちます。


### その他のアセット

```jsx
import imgReference from './image.png'; // img === '/src/image.png'
import svgReference from './image.svg'; // svg === '/src/image.svg'
import txtReference from './words.txt'; // txt === '/src/words.txt'

// この例ではJSXを使用していますが、どのようなフレームワークでもインポート参照を使用できます。
<img src={imgReference.src} alt="画像の説明" />;
```

上記で明示されていないその他のアセットは、ESMの `import` を使ってインポートすることができ、最終的にビルドされたアセットへのURLリファレンスを返します。これは、JS以外のアセットをURLで参照する場合に便利です。たとえば、画像要素を作成して、その画像を指す`src`属性を指定できます。

また、[ディレクトリ構造](/ja/basics/project-structure/#public)で説明されているように、画像は`public/`フォルダに配置するのも便利です。

:::note
アクセシビリティの観点から、`<img>`タグに**altテキスト**を付加することが推奨されています！画像要素に`alt="役に立つ説明"`属性を追加することを忘れないでください。画像が単なる装飾である場合は、この属性を空で指定します。
:::


## `Astro.glob()`

[`Astro.glob()`](/ja/reference/api-reference/#astroglob)は、多数のファイルを一度にインポートするための方法です。

`Astro.glob()`は、インポートしたいローカルファイルと一致する相対[globパターン](/ja/guides/imports/#globパターン)を1つのパラメータとして受け取るだけです。これは非同期で、マッチした各ファイルのエクスポートを配列で返します。

```astro title="src/components/my-component.astro"
---
// `./src/pages/post/`の`.md`で終わるすべてのファイルをインポート
const posts = await Astro.glob('../pages/post/*.md'); 
---
<!-- ブログ投稿の最初の5つの<article>をレンダリング -->
<div>
{posts.slice(0, 4).map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <a href={post.url}>もっと読む</a>
  </article>
))}
</div>
```

`Astro.glob`を使用してインポートされたAstroコンポーネントは、[`AstroInstance`](/ja/reference/api-reference/#astro-files)型です。各コンポーネントのインスタンスは、その`default`プロパティを使用してレンダリングできます。

```astro title="src/pages/component-library.astro" {8}
---
// `./src/components/`の`.astro`で終わるすべてのファイルをインポート
const components = await Astro.glob('../components/*.astro');
---
<!-- すべてのコンポーネントを表示 -->
{components.map((component) => (
  <div>
    <component.default size={24} />
  </div>
))}
```

### globパターン

globパターンは、特殊なワイルドカード文字をサポートするファイルパスです。プロジェクト内の複数のファイルを一度に参照する場合に使用します。

たとえば、globパターン`./pages/**/*.{md,mdx}`は、`pages`サブディレクトリで始まり、そのサブディレクトリをすべて調べ（`/**`）、 ファイル名（`/*`）が`.md`または`.mdx`で終わる（`.{md,mdx}`)ファイルにマッチします。

#### Astroのglobパターン

`Astro.glob()`で使用する場合、globパターンは文字列リテラルである必要があり、変数を含むことはできません。回避策については、[トラブルシューティングガイド](/ja/guides/troubleshooting/#astroglob---no-matches-found一致するものはありません)を参照してください。

また、グロブパターンは、以下のいずれかで始まる必要があります。
- `./` （カレントディレクトリで起動する）
- `../` （親ディレクトリから開始する場合）
- `/` （プロジェクトのルートから開始する場合）

[globパターンの構文について、詳しくはこちらをご覧ください](https://github.com/mrmlnc/fast-glob#pattern-syntax)。

#### `Astro.glob()`と`getCollection()`

[コンテンツコレクション](/ja/guides/content-collections/)は、`Astro.glob()`の代わりに複数のファイルを読み込むための[`getCollection()` API](/ja/reference/api-reference/#getcollection)を提供します。コンテンツファイル（Markdown、MDX、Markdocなど）が`src/content/`ディレクトリ内のコレクションに配置されている場合、`getCollection()`を使用して[コレクションのクエリ](/ja/guides/content-collections/#コレクションのクエリ)を行い、コンテンツのエントリーを返します。

## WASM

```js
// 要求されたWASMファイルをロードして初期化する
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));
```

Astroは、ブラウザの[`WebAssembly`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) APIを使用して、WASMファイルをアプリケーションに直接読み込むことをサポートしています。


## Nodeビルトイン

Astroのユーザーには、可能な限りNode.jsのビルトイン（`fs`、`path`など）を避けることをおすすめします。Astroは、[アダプター](/ja/guides/server-side-rendering/)を使用して複数のランタイムと互換性があります。これには、`fs`などのNodeビルトインモジュールをサポートしない[Deno](https://github.com/denoland/deno-astro-adapter)や[Cloudflare Workers](/ja/guides/integrations-guide/cloudflare/)が含まれます。

私たちの目的は、一般的なNode.jsのビルトインに対するAstroの代替機能を提供することです。しかし、今のところそのような代替機能は存在しません。ですから、もし本当にこれらのビルトインモジュールを使う必要があるのなら、それを止めたいとは思いません。AstroはNode.jsのビルトインを、Nodeの新しいプレフィックスである`node:`を使ってサポートしています。たとえば、ファイルを読み込む場合、次のようにします。

```astro title="src/components/MyComponent.astro"
---
// 例: Node.js から "fs/promises" ビルトインをインポートします。
import fs from 'node:fs/promises';

const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---

<span>Version: {data.version}</span>
```

## ファイル形式のサポートを拡張

**Vite**と互換性のある**Rollup**プラグインを使用すると、Astroがネイティブでサポートしていないファイル形式をインポートできます。必要なプラグインがどこにあるかは、Viteドキュメントの[プラグインの検索](https://ja.vitejs.dev/guide/using-plugins.html#プラグインの検索)セクションを参照してください。

:::note[プラグイン設定]
設定オプションや正しいインストール方法については、プラグインのドキュメントを参照してください。
:::

<RecipeLinks slugs={["ja/recipes/add-yaml-support"]} />
